<template>
    <div class="zpjheaderbox">
        <img src="/img/zuopinji.png" alt="">
    </div>
    <div class="aa">
        <p class="tit" v-if="aa.title">{{ aa.title }}</p>
        <div class="use">
            <div class="img">
                <img :src="use.headerimg" alt="">
                <div class="com">
                    <span class="sp1">{{ use.nick }}</span>
                    <span>{{ use.address }} &nbsp;&nbsp;/&nbsp;&nbsp;{{ use.RegistrationTime }}</span>
                </div>
            </div>
        </div>
        <p class="zuopincontent">【详情】{{ aa.notes }}</p>
        <img v-for="i in  aa.UploadContent" :key="i" :src="i" alt="">
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { GetWorksAndUsers } from '@/api/Uploadyourwork'
import { useRouter } from 'vue-router'
const router = useRouter();
//data
const aa = ref({})
//user
const use = ref({})
//获取信息
const getzuopinxingxi = async () => {
    let i = JSON.parse(localStorage.getItem("XIANG_QING"))
    let h = await GetWorksAndUsers(i.img_id, i.userID)
    const { resultCode, resultInfo } = h
    const { data, user } = resultInfo
    if (resultCode == 1) {
        console.log(resultInfo.data[0]);
        aa.value = data[0]
        use.value = user[0]
    }
}

onMounted(() => {
    getzuopinxingxi()
})
</script>
<style scoped lang="scss">
.zpjheaderbox {
    background: url(/img/bg2.jpg) 100%;
    height: 150px;
    text-align: center;

    img {
        margin-top: 20px;
    }



}

.aa {
    width: 50vw;
    margin: 20px auto;
    text-align: left;

    img {
        display: block;
        margin: 10px auto;
        width: 100%;
        box-shadow: 6px 5px 10px #D1D1D1;
    }

    .tit {
        font-size: 30px;
    }

    .use {
        .img {
            display: flex;

            img {
                margin: 0 15px 0 0;
                width: 70px;
                height: 70px;
                border-radius: 50%;
            }

            .com {
                .sp1 {
                    font-size: 20px;
                    line-height: 5vh;
                    margin-left: -12vw;
                    color: black;
                }

                display: flex;
                flex-direction: column;
                align-items: center;
                color: rgb(197, 196, 193);
            }
        }
    }

    .zuopincontent {
        margin: 50px 0;
    }
}</style>